<template>
	<view class="Index">
		<!-- 瀑布流布局列表 -->
		<view class="pubuBox">
			<view class="pubuItem">
				<view class="item-masonry" v-for="(item, index) in comList" :key="index">
					<image :src="item.avatar" mode="widthFix"></image>
					<view class="listtitle"> <!-- 这是没有高度的父盒子（下半部分） -->
						<view class="listtitle1">{{ item.name }}</view>
						<view class="listtitle2">
							<text class="listtitle2son">￥</text>
							{{ item.price }}
						</view>
						<view class="listtitle3">
							库存:{{item.store}}
						</view>
						<view>
							<button @click="pay(item)">兑换</button>
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// {
				// 	img: 'http://localhost:8086/file/359b58c255474888a0eea23a8dd5f893.webp',
				// 	name: '商品名称会在超出两行时候自动折叠',
				// 	commdityPrice: 100
				// },
				comList: [], //商品列表
				user: {},
			};
		},
		onShow() {

		},
		onLoad() {
			this.getUser(),
				this.load()
		},
		methods: {
			getUser() {
				try {
					this.user = uni.getStorageSync('user');
				} catch (e) {
					// error
				}

			},
			load() {
				let me = this;
				uni.request({
					url: me.serverUrl + `/goods`, //仅为示例，并非真实接口地址。
					data: {
						name: "",
					},
					method: "GET",
					success: (res) => {
						// console.log(res.data.records)
						this.comList = res.data.records
					}
				})
			},
			pay(item) {
				let me = this;
				// console.log(item.id)
				console.log(this.user)
				uni.showModal({
					title: '提示',
					content: '确定要兑换一个' + item.name + '吗?',
					success: function(res) {
						if (res.confirm) {
							if (me.user == null) {
								console.log("没登录")
								uni.showModal({
									title: '提示',
									content: '您还没有登录！！！',
									success: function(res) {
										if (res.confirm) {
											uni.navigateTo({
												url: '/pages/login/login'
											})
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});
								return;
							}

							console.log(me.user)

							uni.showToast({
								title: '已添加到待确认订单中',
								icon: 'success',
								duration: 3000
							});
							uni.request({
								url: me.serverUrl + `/orders/uncertain/` + item.id + '/' + me.user
									.id, //仅为示例，并非真实接口地址。
								header: {
									'Content-type': 'application/x-www-form-urlencoded'
								},

								data: {
									state: 1
								},
								method: "POST",
								success: (res) => {
									console.log(res)
								}
							})
						} else if (res.cancel) {

						}
					}
				});
			}
		},

	};
</script>

<style lang="scss">
	//瀑布流
	page {
		background-color: #eee;
		height: 100%;
	}

	.pubuBox {
		padding: 22rpx;
	}

	.pubuItem {
		column-count: 2;
		column-gap: 20rpx;
	}

	.item-masonry {
		box-sizing: border-box;
		border-radius: 15rpx;
		overflow: hidden;
		background-color: #fff;
		break-inside: avoid;
		/*避免在元素内部插入分页符*/
		box-sizing: border-box;
		margin-bottom: 20rpx;
		box-shadow: 0px 0px 28rpx 1rpx rgba(78, 101, 153, 0.14);
	}

	.item-masonry image {
		width: 100%;
	}

	.listtitle {
		padding-left: 22rpx;
		font-size: 24rpx;
		padding-bottom: 22rpx;

		.listtitle1 {
			line-height: 39rpx;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
			min-height: 39rpx;
			max-height: 78rpx;
		}

		.listtitle2 {
			color: #ff0000;
			font-size: 32rpx;
			line-height: 32rpx;
			font-weight: bold;
			padding-top: 22rpx;

			.listtitle2son {
				font-size: 32rpx;
			}
		}

		.listtitle3 {
			font-size: 28rpx;
			color: #909399;
			line-height: 32rpx;
			padding-top: 22rpx;
		}
	}

	.Index {
		width: 100%;
		height: 100%;
	}
</style>